<template>
  <div>
    <!-- <yd-slider autoplay="3000" class="rightlove">
      <yd-slider-item v-for="(item, index) in list" :key="index" :src="item.src">
        <img :src="item.src" style="height:200px;">
      </yd-slider-item>
      <hd-svg-icon name="hd-zan2" slot="right" size="35px" color="#ffffff" class="hongxin"></hd-svg-icon>
    </yd-slider> -->
      <yd-lightbox :num="list.length">
        <div style="width:100%;height:200px; overflow-y:hidden">
        <yd-lightbox-img v-for="(item, index) in list" :key="index" :src="item.src" style="width:100%;height:200px"></yd-lightbox-img>
        </div>
        <div class="imgnum">
            <hd-svg-icon name="hd-tupian" size="13px" color="#bbbbbb" style="margin-top:3px"></hd-svg-icon>&nbsp;&nbsp;{{list.length}}
        </div>
        <div class="collection" v-if="this.collectionState === '0'" @click="addCollection()">
            <hd-svg-icon name="hd-shoucang" size="25px" color="#333333" style="margin-top:3px"  ></hd-svg-icon>
        </div>
        <div class="collection" v-if="this.collectionState === '1'" @click="cancelCollection()">
            <hd-svg-icon name="hd-shoucang1" size="25px" style="margin-top:3px"></hd-svg-icon>
        </div>
        <router-link :to="{path:'addComplaint',query: {source_id:this.$route.query.id,source_name:lastdata.name,type:lastdata.type}}">
          <div class="complaint">
              <hd-svg-icon name="hd-icon-yxj-complaint" color="red" size="25px"  style="margin-top:3px"></hd-svg-icon>
          </div>
        </router-link>
      </yd-lightbox>
    <!-- 以上轮播图 -->
    <div class="daohang">
      <div><a href="#zhaopaicai">招牌菜</a></div>
      <div><a href="#shanghuxinxi">商户信息</a></div>
      <div><a href="#quanjingtiyan">全景体验</a></div>
      <div><a href="#dituyindao">地图引导</a></div>
      <div><a href="#youkedianping">游客点评</a></div>
    </div>
    <div class="tuijianline">
      <div class="tuijianliyoutitle" id="zhaopaicai">招牌菜</div>
      <div v-for="item in outdata" :key="item.index">
        <span class="tuijianliyoubody">{{item.product_name}}&nbsp;&nbsp;</span>
      </div>
    </div>
    <!-- 以上推荐理由 -->
    <div class="youkexuzhititle" id="shanghuxinxi">商户信息</div>
    <div class="xzone">
      <yd-flexbox style="margin-bottom: 10px;">
        <yd-flexbox-item>
          <yd-flexbox>
            <hd-svg-icon name="hd-zhongbiao" size="25px" color="#000000" style="margin-right:5px"></hd-svg-icon>
            <yd-flexbox direction="vertical" class="xzone0">
              <yd-flexbox-item>营业时间</yd-flexbox-item>
              <yd-flexbox-item>{{lastdata.open_time}}</yd-flexbox-item>
            </yd-flexbox>
          </yd-flexbox>
        </yd-flexbox-item>
      </yd-flexbox>
      <div class="sheshititle" id="yourenxuzhi">基础设施</div>
      <!-- 循环显示图标 -->
      <div class="xzinformation">
        <yd-flexbox style="width:100%;flex-wrap: wrap;padding-left:9%" >
          <div class="informationIcon" v-for="information in showinformation" :key="information.index">
            <hd-svg-icon :name="information.image" color="" size=".5rem" class="hdicon"></hd-svg-icon>
            {{information.label}}
          </div>
        </yd-flexbox>
      </div>
    </div>
    
    
    <!-- 以上游客须知 -->
    <div class="quanjing">
      <!-- {{lastdata.map_url}} -->
      <div class="quanjingtiyantitle" id="quanjingtiyan">全景体验</div>
      <a class="dpyl" :href="lastdata.map_url">大屏预览</a>
      <!-- <a href="">全屏预览</a> -->
      <iframe :src="lastdata.map_url" frameborder="0" style="width:90%;height:250px;margin-left:5%;padding-bottom:20px;border-bottom:1px solid #bbbbbb;"></iframe>
    </div>
    <div class="ditu">
      <div class="dituyindaotitle" id="dituyindao">地图导引</div>
      <div class="amap-page-container">
        <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo" >
          <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable" :key="index"></el-amap-marker>
        </el-amap>
      </div>
    </div>
    <div class="fengexian"></div>
    <div class="speak">
      <div class="youkedianpingtitle" id="youkedianping">游客点评<yd-button type="danger" bgcolor="#FF9800" color="#fff" style="float:right;"><router-link :to="{path:'lovepingnoping',query: {id:this.$route.query.id,type:'M',title:lastdata.name,place_image:lastdata.img}}">爱评不评</router-link></yd-button></div>
      <div class="youkedianpingbody">
        <yd-flexbox>
          <yd-flexbox-item style="padding-right:10px;height:46px;text-align: center;" align="center">
           <span class="math">{{pingjunfen.average}} </span>分 {{oyisi}}<br>高于{{SorceAsc}}%同类饭店
          </yd-flexbox-item>
          <!-- <yd-flexbox-item align="left" style="padding-left:10px;">
                位置：4.2&nbsp;&nbsp;&nbsp;&nbsp;美味：4.5 <br>
                服务：4.1&nbsp;&nbsp;&nbsp;&nbsp;卫生：4.2
          </yd-flexbox-item> -->
        </yd-flexbox>
      </div>
      <div class="fengexian"></div>
      <div class="speakbody" v-for="(spitems,$index) in speakdata" :key="$index">
        <yd-flexbox class="speaktop">
          <div class="speakheadimg"><img :src="spitems.headimgurl" alt=""></div>
          <yd-flexbox-item style="padding: 0px 10px;float:left;">
            <router-link :to="{path:'speak_detail',query: {id:spitems.id}}">
            <div class="nickname">
              {{spitems.nickname}} 
              <span style="float:right">{{spitems.create_time}}</span> 
              <br>
            </div>
            <div class="starspeak">
              打分&nbsp;<yd-rate v-model="spitems.score" readonly="readonly" count="5" color="#ff9800" activeColor="#ff9800" size="12px" padding="1px"></yd-rate>  ¥{{spitems.consumption}}/人
            </div>
            <div class="pinglun">
              {{spitems.content}}
            </div>
            </router-link>
             <div class="spimg">
              <yd-flexbox>
                <yd-lightbox>
                  <div style="height: 70px;overflow-y: hidden;">
                    <yd-lightbox-img class="pinglunimgdiv" v-for="(item, index) in spitems.imagelist" :key="index" :src="item"></yd-lightbox-img>
                  </div>
                </yd-lightbox>
              </yd-flexbox>
              <div class="imgnum">
                <hd-svg-icon name="hd-tupian" size="13px" color="#bbbbbb" style="margin-top:3px"></hd-svg-icon>&nbsp;&nbsp;{{spitems.imagelength}}
              </div>
            </div>
            <div class="lookcz">
              <yd-flexbox>
                <yd-flexbox-item>浏览{{spitems.see}}</yd-flexbox-item>
                <yd-flexbox-item style="text-align:right;margin-right:9px;">
                  <span v-if="spitems.zan=='0'" @click="addZan(spitems.comment_id,spitems.place_id)">                  
                    <hd-svg-icon name="hd-xin2" size="15px" color="#bbbbbb" class="" ></hd-svg-icon>{{spitems.fabulous}}
                  </span>
                  <span v-if="spitems.zan!='0'" @click="cancelZan(spitems.comment_id,spitems.place_id)">                  
                    <hd-svg-icon name="hd-xin-" size="15px" color="#bbbbbb" class="" ></hd-svg-icon>{{spitems.fabulous}}
                  </span>
                </yd-flexbox-item>
              </yd-flexbox>
            </div>
          </yd-flexbox-item>
          <!-- <div style="padding-top:0px;">{{spitems.create_time}}</div> -->
        </yd-flexbox>
      </div>
      <!-- <yd-tabbar fixed bgcolor="#FF4040" class="bottabbar" v-if="lastdata.book==='0'">
          <div style="height:40px;width:100%;" class="r_url">
            <router-link :to="{path:'/blue_onlinebooking',query: {id:this.$route.query.id}}">在线预订
            </router-link>
          </div>
      </yd-tabbar> -->
    </div>
    <div>
      
    </div>
  </div>
</template>

<script>
export default {
  name: 'amap-page',
  data() {
    return {
      list: [],
      rate4: 3,
      zoom: 14,
      readonly: true,
      center: [116.397477, 39.908692],
      outdata: '',
      speakdata: [],
      pingjunfen: '',
      lastdata: '',
      SorceAsc: '',
      oyisi: '',
      imagelist: [],
      collectionState: '',
      markers: [
        {
          // position: [121.5273285, 31.21515044],
          position: [116.397477, 39.908692]
        }
      ],
      infortationarr: [
        {
          label: '免费wifi',
          image: 'hd-iconfontwifi1',
          value1: '0',
          checked: false
        },
        {
          'label': '停车场',
          'image': 'hd-tingchechang',
          'value1': '1',
          'checked': false
        },
        {
          'label': '接送服务',
          'image': 'hd-jiesongfuwu',
          'value1': '2',
          'checked': false
        },
        {
          'label': '行李寄存',
          'image': 'hd-xinglijicun',
          'value1': '3',
          'checked': false
        },
        {
          'label': '餐厅',
          'image': 'hd-canting',
          'value1': '4',
          'checked': false
        },
        {
          'label': '24h热水',
          'image': 'hd-24xiaoshireshui',
          'value1': '5',
          'checked': false
        },
        {
          'label': '吹风机',
          'image': 'hd-chuifengji',
          'value1': '6',
          'checked': false
        },
        {
          'label': '免费洗漱用品',
          'image': 'hd-mianfeixishuyongpin',
          'value1': '7',
          'checked': false
        },
        {
          'label': '叫醒服务',
          'image': 'hd-jiaoxingfuwu',
          'value1': '8',
          'checked': false
        },
        {
          'label': '送餐服务',
          'image': 'hd-songcanfuwu',
          'value1': '9',
          'checked': false
        },
        {
          'label': '会议室',
          'image': 'hd-huiyishi',
          'value1': '10',
          'checked': false
        },
        {
          'label': '商务中心',
          'image': 'hd-shangwuzhongxinr',
          'value1': '11',
          'checked': false
        },
        {
          'label': '可吸烟',
          'image': 'hd-icon_smoke',
          'value1': '12',
          'checked': false
        }
      ],
      array: [],
      showinformation: []
    };
  },
  mounted: function() {
    this.load();
    this.$parent.title = this.$route.query.name;
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.getInfo,
        data: {
          type: 'M',
          place_id: this.$route.query.id
        },
        success: (resultData) => {
          this.outdata = resultData.data.infolist;
          this.lastdata = resultData.data.sub_place;
          let long = resultData.data.sub_place.longitude
          let lat = resultData.data.sub_place.latitude
          let mkarr = []
          let tempmk = {
            position: [long, lat]
          }
          this.imagearr = resultData.data.sub_place.pictures_arr.split(',');
          this.imagearr.forEach(function(element) {
            var imagelist = {};
            imagelist['src'] = element;
            this.list.push(imagelist);
          }, this);
          // 存储marker信息
          mkarr.push(tempmk)
          this.markers = mkarr
          // alert(long);
          // alert(lat);
          // 存储中心点
          this.center = [long, lat];
          // this.center = lat;
          // alert(this.center);
          // 获取图标
          this.array = this.lastdata.infomation.split(',');
          console.log(this.array);
          this.infortationarr.forEach(function(element) {
            this.array.forEach(function(list) {
              if (list === element.value1) {
                this.showinformation.push(element);
                console.log(this.showinformation);
              }
            }, this);
          }, this);
        }
      });
      this.hdAjax({
        url: this.API.findCommentList,
        data: {
          // type: 'M',
          place_id: this.$route.query.id
        },
        success: (resultData) => {
          this.speakarr = resultData.data.results;
          this.speakarr.forEach(function(element) {
            if (element.image == undefined || element.image == '') {
              element['imagelength'] = 0
            } else {
              console.log(element.image.split(','));
              element['imagelist'] = (element.image.split(','));
              element['imagelength'] = element.image.split(',').length;
            }
            this.speakdata.push(element);
          }, this);
          console.log(this.speakdata);
        }
      });
      this.hdAjax({
        url: this.API.findAverage,
        data: {
          // type: 'M',
          place_id: this.$route.query.id
        },
        success: (resultData) => {
          this.pingjunfen = resultData.data;
          if (resultData.data.average <= 5.0 && resultData.data.average >= 4.0) {
            this.oyisi = '非常美味'
          }
          if (resultData.data.average < 4.0 && resultData.data.average >= 3.0) {
            this.oyisi = '美味'
          }
          if (resultData.data.average < 3.0 && resultData.data.average >= 2.0) {
            this.oyisi = '一般'
          }
          if (resultData.data.average < 2.0 && resultData.data.average >= 1.0) {
            this.oyisi = '差'
          }
          if (resultData.data.average < 1.0 && resultData.data.average >= 0.0) {
            this.oyisi = '极差'
          }
        }
      });
      this.hdAjax({
        url: this.API.getSorceAsc,
        data: {
          place_type: 'M',
          id: this.$route.query.id
        },
        success: (resultData) => {
          this.SorceAsc = resultData.data.bunum
        }
      });
      this.hdAjax({
        url: this.API.getCollectionState,
        data: {
          source_id: this.$route.query.id
        },
        success: (resultData) => {
          this.collectionState = resultData.data.state;
          // console.log('===========>' + this.collectionState)
        }
      });
      this.hdAjax({
        method: 'POST',
        url: this.API.createFootprint,
        data: {
          id: this.$route.query.id,
          type: 'M'
        },
        success: (resultData) => {
          // this.collectionState = resultData.data.state;
          console.log('===========>' + 'success')
        }
      });
    },
    addCollection() {
        // alert('!!!!!')
      this.hdAjax({
        method: 'POST',
        url: this.API.createCollection,
        data: {
          id: this.$route.query.id,
          type: 'M'
        },
        success: (resultData) => {
          this.$dialog.toast({mes: '您已成功收藏!'})
          this.hdAjax({
            url: this.API.getCollectionState,
            data: {
              source_id: this.$route.query.id
            },
            success: (resultData) => {
              this.collectionState = resultData.data.state;
              // console.log('===========>' + this.collectionState)
            }
          });
        }
      });
    },
    cancelCollection() {
      // alert('!!!!!')
      this.hdAjax({
        method: 'post',
        url: this.API.createCollection,
        data: {
          id: this.$route.query.id,
          type: 'M'
        },
        success: (resultData) => {
          this.$dialog.toast({mes: '您已取消收藏!'})
          this.hdAjax({
            url: this.API.getCollectionState,
            data: {
              source_id: this.$route.query.id
            },
            success: (resultData) => {
              this.collectionState = resultData.data.state;
              // console.log('===========>' + this.collectionState)
            }
          });
        }
      });
    },
    addZan(cid, pid) {
      console.log(cid);
      console.log(pid);
      this.hdAjax({
        method: 'POST',
        url: this.API.updateFabulous,
        data: {
          comment_id: cid,
          place_id: pid,
          fabulous_state: '1'
        },
        success: (resultData) => {
          this.$dialog.toast({mes: '点赞成功!'})
          this.speakdata.forEach(function(element) {
            if (element['comment_id'] === cid) {
              console.log(element['zan']);
              element['zan'] = '1';
              element['fabulous'] = element['fabulous'] + 1;
            }
          }, this);
        }
      });
    },
    cancelZan(cid, pid) {
      console.log(cid);
      console.log(pid);
      this.hdAjax({
        method: 'POST',
        url: this.API.updateFabulous,
        data: {
          comment_id: cid,
          place_id: pid,
          fabulous_state: '0'
        },
        success: (resultData) => {
          this.$dialog.toast({mes: '取消成功!'})
          this.speakdata.forEach(function(element) {
            if (element['comment_id'] === cid) {
              console.log(element['zan']);
              element['zan'] = '0';
              element['fabulous'] = element['fabulous'] - 1;
            }
          }, this);
        }
      });
    }
  }
}
</script>

<style scoped>
.pinglunimgdiv{
  padding: 3px;
  width: 33%;
  height: 70px;
  overflow: hidden;
}
.pinglunimgdiv img{
  width: 20px;
  height: 20px;
}
.rightlove{
  position: relative;
}
.hongxin{
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 100;
}
.daohang{
  float: left;
  width: 90%;
  height: 40px;
  margin-left: 5%;
  border-bottom: 1px solid #bbbbbb;
}
.daohang div{
  float: left;
  width: 20%;
  line-height: 40px;
  text-align: center;
}
.tuijianliyoutitle{
  float: left;
  width: 90%;
  height: 40px;
  margin-top: 10px;
  font-size: 15px;
}
.tuijianliyoubody{
  font-size: 13px;
  float:left;
  margin-bottom: 10px;
}
.tuijianline{
  float: left;
  width: 90%;
  margin-left: 5%;
  border-bottom: 1px solid #bbbbbb;
}
.user{
  width: 90%;
  height: 60px;
  float: left;
  margin-left: 5%;
  margin-top: 15px;
  border-bottom: 1px solid #bbbbbb;
}
.headimg{
  float: left;
  width: 20%;
  height: 50px;
  margin-left: 50%;
}
.headimg img{
  width: 100%;
  height: 100%;
  border-radius: 23px;
}
.name{
  float: left;
  height: 50px;
  width: 28%;
  font-size: 15px;
  margin-left: 2%;
}
.name-one{
  margin-top: 5px;
  margin-bottom: 5px;
}
.youkexuzhititle{
  float: left;
  width: 90%;
  height: 40px;
  margin-left: 5%;
  margin-top: 10px;
  font-size: 15px;
}
.xzone{
  float: left;
  width: 100%;
  /* margin-left: 5%; */
  padding-left: 5%;
  /* border-bottom: 1px solid #bbbbbb; */
}
.xztwo{
  float: left;
  width: 90%;
  margin-left: 5%;
  margin-top: 10px;
}
.xzthree{
  float: left;
  width: 90%;
  margin-left: 5%;
  margin-top: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid #bbbbbb;
}
.quanjingtiyantitle{
  float: left;
  width: 70%;
  height: 50px;
  margin-left: 5%;
  margin-top: 10px;
  font-size: 15px;
}
.dituyindaotitle{
  width: 90%;
  height: 50px;
  margin-left: 5%;
  margin-top: 10px;
  font-size: 15px;
}
.amap-demo {
  height: 300px;
}
.fengexian{
  margin-top: 10px;
  width: 90%;
  margin-left: 5%;
  border-bottom: 1px solid #bbbbbb;
}
.youkedianpingtitle{
  width: 90%;
  height: 50px;
  margin-left: 5%;
  margin-top: 10px;
  font-size: 15px;
}
.youkedianpingbody{
  width: 90%;
  margin-left: 5%;
}
.math{
  font-size: 20px;
  color: orange;
}
.speak{
  margin-bottom: 49px;
}
.speakbody{
  margin-top: 20px;
  width: 90%;
  margin-left: 5%;
  padding-bottom: 15px;
  border-bottom: 1px solid #bbbbbb;
}
.speakheadimg img{
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.nickname{
  width: 100%;
  margin-top: 0px;
}
.starspeak{
  display: inline-flex;
  margin-top: 10px;
}
.pinglun{
  width: 100%;
  margin-top: 5px;
}
.flexbox-item img{
  margin-top: 10px;
  width: 100%;
  padding: 2px;
}
.lookcz{
  width: 100%;
  margin-top: 5px;
}
.bottabbar{
  float: left;
  width: 100%;
  height: 50px;
  border-top: 1px solid #bbbbbb;
  z-index: 999;
  padding: 5px 5%;
}
.yybtn{
  width: 100%;
  height: 100%;
}
.moneymath{
  color: #000000;
  height: 20px;
  font-size: 15px;
}
.monbody{
  color: #000000;
  width: 100%;
  height: 20px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.speaktop{
  align-items: flex-start;
}
.spimg{
  width: 100%
}
.imgnum{
  float:right;
  margin-right: 10px;
  margin-top: -28px;
  color:#ffffff;
  position: relative;
  background-color: #333333;
  background-color:rgba(0,0,0,0.6);
  /* border: 3px solid #333333; */
  border-radius: 18px;
  width: 45px;
  height: 20px; 
  text-align:center
}
.collection{
  float:right;
  margin-right: 10px;
  margin-top: -180px;
  position: relative;
  width: 45px;
  height: 20px; 
  text-align:center
}

.xzinformation{
  float: left;
  width: 90%;
  margin-left: 3%;
  padding-bottom: 20px;
  border-bottom: 1px solid #bbbbbb;
}
.informationIcon{
  width:1.9rem;
  margin-bottom:5px;
}
.sheshititle{
  float: left;
  width: 90%;
  height: 20px;
  margin-top: 10px;
  font-size: 10px;
}
.complaint{
  float:right;
  margin-right: 40px;
  margin-top: -180px;
  position: relative;
  width: 45px;
  height: 20px; 
  text-align:center
}
.bottabbar{
  float: left;
  width: 100%;
  height: 50px;
  border-top: 1px solid #bbbbbb;
  z-index: 999;
  padding: 5px 5%;
}
.r_url{
  line-height: 48px;
  color: #fff;
  font-size: 16px;
  text-align: center;
}
.dpyl {
  width:20%;
  height:50px;
  margin-left: 5%;
  margin-top: 10px;
  font-size: 15px;
  float:left
}
</style>
